<section class="more-info">
  <div class="more-info-wrapper">
    {%- if section.settings.text != blank -%}
      <h1>THE RESOLUTIONS STARTER PACK</h1>
    {%- else -%}
      <h1>{{ block.settings.text | escape }}</h1>
    {%- endif -%}

    {%- if section.settings.text2 != blank -%}
      <p>
        Go for all your fitness goals with a curated collection of new kicks breathable apparel, and more supportive
        styles
      </p>
    {%- else -%}
      <p>
        {{ block.settings.text2 | escape }}
      </p>
    {%- endif -%}

    <button>Shop</button>
  </div>
</section>

<style>
  .more-info {
    background: {{ section.settings.background }}
    ;
    color: {{ section.settings.text_color }}
    ;
    display: flex;
    justify-content: center;
  }

   .more-info-wrapper{
      display: flex;
      flex-direction: column;
      width: 500px;
      justify-content: center;
      align-items: center;
   }

   .more-info-wrapper h1 {
      font-size: 50px;

   }

   .more-info-wrapper button {
      padding: 10px 20px 10px 20px;
      background-color: black;
      border: none;
      color: white;
      border-radius: 20px;
      cursor: pointer;
   }

   .more-info-wrapper button:hover {
      background-color: rgb(185, 185, 185);

   }
</style>
{% schema %}
{
  "name": "More-info",
  "settings": [
    {
      "type": "color",
      "id": "background",
      "label": "Background",
      "default": "#F4F4F4"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Text",
      "default": "#000000"
    },
    {
      "type": "text",
      "id": "text",
      "label": "Text",
      "default": "default text"
    },
    {
      "type": "text",
      "id": "text2",
      "label": "Text2",
      "default": "default text"
    }
  ],
  "presets": [
    {
      "name": "more-info"
    }
  ]
}
{% endschema %}
